<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        ul, ol {
            list-style-type: none;
        }

        * {
            margin: 0;
            padding: 0;
        }

        html, body {
            width: 100%;
            height: 100%;
        }

        #ul {
            width: 100%;
            height: 100%;
        }

        ul li {
            width: 100%;
            height: 100%;
        }

        #ol {
            position: fixed;
            top: 0;
            left: 50px;
        }

        #ol li {
            width: 50px;
            height: 50px;
            border: 1px solid #000;
        }
    </style>
    <script src="my.js" type="text/javascript"></script>
    <script>
        window.onload = function () {
            var ulBox = $("ul");
            var ulBoxLi = ulBox.children;
            var olBox = $("ol");
            var olBoxLi = olBox.children;
            var bgColor = ["pink", "purple", "orange", "blue", "green"];
            var leader = 0, target = 0, timer = null;
            for (var i = 0; i < ulBoxLi.length; i++) {
                ulBoxLi[i].style.backgroundColor = bgColor[i];
                olBoxLi[i].style.backgroundColor = bgColor[i];
                olBoxLi[i].index = i;  // 记录当前的索引号
                olBoxLi[i].onclick = function () {
                    clearInterval(timer);
                    target = ulBoxLi[this.index].offsetTop; // 核心语句
                    console.log(target);
                    timer = setInterval(function () {
                        leader = leader + (target - leader) / 10;
                        window.scrollTo(0, leader); // 屏幕滑动
                        //pic.style.left = leader  + 'px';
                    }, 30)
                }
            }
        }
    </script>
</head>
<body>
<ul id="ul">
    <li>首页1</li>
    <li>关注2</li>
    <li>动态3</li>
    <li>风格4</li>
    <li>作品5</li>
</ul>
<ol id="ol">
    <li>首页</li>
    <li>关注</li>
    <li>动态</li>
    <li>风格</li>
    <li>作品</li>
</ol>
</body>
</html>